<template><!--学习排行榜-->
    <div class="warp-2 fame" style="height:100%;margin-top: 56px;">
        <navbar :title="$t('rank_learning_title')" class="header-title-01 header-title-03"></navbar>
        <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
            <van-list
            v-model="isLoading"
            :finished="finished"
            :finished-text="(finished&&learningRankTotal>0) ? $t('no_more') : ''"
            loding-text="loading"
            @load="getlearningRankTotal"
            >
                <div class="rank-tip">
                    <i class="tip-icon"></i>
                    <div>{{$t('learn_rank_desc', {pageSize: pageSize})}}</div>
                </div>
                <div class="rank-box">
                    <div class="module-box-06">
                        <div class="module-box-10">
                            <div class="box-table" v-if="userInfo">
                                <span class="box-table-cell user-pic-2" @click="JumpPersonal()">
                                    <head-img :head-img-url="appUrl + userInfo.userPoto" :user-ent-id="userInfo.usrEntId" width="50px" height="50px"></head-img>
                                </span>
                                <div  class="box-table-cell font-size16 box-08 my-rank-msg">
                                    <div class="usr-name" @click="JumpPersonal()">{{ userInfo.usrDisplayBil }}</div>
                                    <div class="updata-time">{{$t('last_update_time')}}: {{learningDetail.lsUpdateTime ? timestampToTime(learningDetail.lsUpdateTime) : '--'}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="my-rank-box">
                        <div class="left">
                        <div>
                            <div class="index">{{learningDetail.index || '--'}}</div>
                            {{$t('rank_index')}}
                        </div>
                        </div>
                        <div class="right">
                        <div>
                            <div class="index">{{learningDetail.lsLearnDuration ? fmtHours(learningDetail.lsLearnDuration) : 0}}</div>
                            {{ $t("rank_learning_total_time") }}
                        </div>
                        </div>
                    </div>
                    <div v-bind:class="{'height100' : learningRankTotal === 0}">
                        <div class="fame-item fame-header">
                            <div class="rank_index">{{$t('rank_index')}}</div>
                            <div class="rank-title">
                                {{$t('personal_files_fullName')}}
                            </div>
                            <div class="like_count">{{$t('rank_learning_total_time')}}</div>
                        </div>
                        <div class="fame-item" v-for="(item, $index) in learningRankList" :key="$index" @click="JumpPersonal(item.lsEntId)">
                            <div class="rank_index"><span :class="{ 'top':$index < 3}">{{$index + 1}}</span></div>
                            <div class="rank-title">
                                <div class="word-clamp-1 font-size15">{{item.user.usrDisplayBil}}</div>
                            </div>
                            <div class="like_count">{{item.lsLearnDuration ? fmtHours(item.lsLearnDuration) : '--'}}</div>
                        </div>
                    </div>
                </div>
                <!--暂无数据-->
                <div v-if="!isLoading && learningRankTotal === 0" style="height:100%;">
                    <div class="box-table" style="width:100%;height:100%;">
                        <div class="box-table-cell" style="text-align: center;">
                            <div class="no-data">
                                <img src="../../../static/images/no-data.png" alt=""/>
                                <p class="color999">{{ $t('no_data') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        <common-loading :isLoading="isLoading" v-if="isLoading"></common-loading>
    </div>
</template>

<script>
import HeadImg from '../personal/HeadImg';
import {fmtHours, cwnEncrypt, cwnDecrypt} from '@/utils/tools';
export default {
    name: 'LearningSituation',
    components: {
        HeadImg
    },
    data() {
        return {
            totalPage: 1,
            pageSize: 100,
            pageNo: 1,
            encId: '', //获取用户id
            userInfo: '', //用户信息
            learningDetail: {}, //我的学习信息
            learningRankList: [], //学习排行
            learningRankTotal: 0, //学习排行总数
            keepTwoNum: '', //保留两位小数
            isLoading: true,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        ...{fmtHours, cwnEncrypt, cwnDecrypt},
        // fmtHours(seconds) {
        //     if (seconds && typeof seconds === 'number') {
        //         // return this.$moment.utc(seconds * 1000).format('HH:mm:ss');
        //         const hh = Math.floor(seconds / (60 * 60));
        //         const mm = Math.floor((seconds % (60 * 60)) / 60) < 10 ? '0' + Math.floor((seconds % (60 * 60)) / 60) : Math.floor((seconds % (60 * 60)) / 60);
        //         const ss = Math.floor((seconds % (60 * 60)) % 60) < 10 ? '0' + Math.floor((seconds % (60 * 60)) % 60) : Math.floor((seconds % (60 * 60)) % 60);
        //         return hh + ':' + mm + ':' + ss;
        //     } else {
        //         return '--';
        //     }
        // },
        timestampToTime(timestamp) {
            let date = new Date(timestamp);
            const Y = date.getFullYear() + '-';
            const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

            let strDate = Y + M + D + h + m + s;
            return strDate;
        },
        init() {
            this.getlearningRankTotal();
            //获取用户id
            this.encId = this.$route.params.encId;
            let entId = this.wbDecryption(this.encId);
            //用户信息
            this.$axios({
                method: 'GET',
                // url: '/app/personal/home/json/' + this.$route.params.encId
                url: `/app/api/trainee/my/detail`
            }).then(res => {
                this.userInfo = res.data;
            });
            //我的学习信息
            this.$axios({
                method: 'GET',
                // url: '/app/rank/myLearningSituation',
                url: `/app/fame/learned/detail-pos`
                // params: {
                //     pageNo: '1',
                //     pageSize: 10
                // }
            }).then((res) => {
                // this.learningDetail = res.data.learnDetail;
                this.learningDetail = res.data;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getlearningRankTotal('refresh');
                this.isRefresh = false;
            }, 900);
        },
        getlearningRankTotal(option) {
            this.isLoading = true;
            //学习排行
            this.$axios({
                method: 'GET',
                // url: '/app/rank/learningSituationRank',
                url: `/app/fame/learned`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                }
            }).then((res) => {
                this.learningRankTotal = res.data.totalRecord || res.data.results.length;
                this.totalPage = res.data.totalPage;
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.learningRankList = res.data.results;
                    } else {
                        this.learningRankList = [...this.learningRankList, ...res.data.results];
                    }
                }
                this.isLoading = false;
                this.pageNo++;
                if (this.learningRankList.length >= this.learningRankTotal) {
                    this.finished = true;
                }
            }).catch(() => {
                this.isLoading = false;
                this.finished = true;
            });
        },
        TimeConversion(time) {
            time = time / 60 / 60;
            return time;
        },
        JumpPersonal(usrId) {
            if (!usrId) {
                this.$router.go(-1);
            } else {
                let encId = this.cwnEncrypt(usrId);
                this.$router.push({path: `/personal/${encId}`});
            }
        }
    },
    mounted() {
        this.$store.commit('addKeepAliveList', 'LearningSituation');
        this.init();
    }
};
</script>

<style scoped lang="less">
    .module-box-06 {
        height: auto;
        background: #fff;
        color: #999;
    }
    .module-box-10>div{
      height: 80px;
    }
    .header-title-03{
      background: #075ebb;
    }
    /deep/.van-nav-bar .van-icon {
        color: #ffffff;
    }
    /deep/.van-nav-bar__title {
        color: #ffffff;
    }
    .box-09 {
        width: 74px;
        padding-left: 10px;
    }
    .rank-box{
      margin:0 15px;
      border-radius: 5px;
      background: #fff;
      overflow: hidden;
      .downLoading{
        background: #fff;
      }
      .my-rank-msg{
        padding-left: 15px;
        .usr-name{
          font-size: 16px;
          color: #333;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 5px;
        }
        .updata-time{
          font-size: 12px;
        }
      }
      .my-rank-box{
        display: flex;
        background: #FAFAFA;
        height: 40px;
        margin: 0 15px;
        padding: 10px 0;
        .index{
          color:#075ebb;
          font-size: 16px;
        }
        .left{
          width: 50%;
          display: flex;
          text-align: center;
          justify-content: center;
          align-items: center;
        }
        .right{
          width: 50%;
          display: flex;
          text-align: center;
          justify-content: center;
          align-items: center;
          position:relative;
          &::before{
            content: '';
            display: block;
            width: 1px;
            height: 30px;
            background: #D5D5D5;
            position: absolute;
            left: 0;
          }
        }
      }
    }
</style>
